<template>
  <div class="home">
    <home-header></home-header>
    <home-swiper :swiperList="swiperList"></home-swiper>
    <home-icons :iconsList="iconsList"></home-icons>
    <home-location></home-location>
    <home-activity></home-activity>
    <home-hot :hotList="hotList"></home-hot>
    <home-like :likeList="likeList"></home-like>
    <home-weekend :weekendList="weekendList"></home-weekend>
  </div>
</template>
<script>
import HomeHeader from './pages/Header'
import HomeSwiper from './pages/Swiper'
import HomeIcons from './pages/Icons'
import HomeLocation from './pages/Location'
import HomeActivity from './pages/Activity'
import HomeHot from './pages/Hot'
import HomeLike from './pages/Like'
import HomeWeekend from './pages/Weekend'
import { mapState } from "vuex"
export default {
  computed: {
    ...mapState(["city"])
  },
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeLocation,
    HomeActivity,
    HomeHot,
    HomeLike,
    HomeWeekend,
  },
  data () {
    return {
      swiperList: [],
      hotList: [],
      iconsList: [],
      likeList: [],
      weekendList: [],
      changedCity: "",

    }
  },
  methods: {
    getHttp () {
      this.$http.get("/api/dataHome.json").then((res) => {
        const data = res.data.data;
        data.forEach((item) => {
          if (item.city == this.city) {
            this.swiperList = item.swiperList;
            this.hotList = item.hotList;
            this.iconsList = item.iconsList;
            this.likeList = item.likeList;
            this.weekendList = item.weekendList;
          }
        });
      })
    }
  },
  mounted () {
    this.changedCity = this.city;
    this.getHttp();
  },
  activated () {
    if (this.changedCity != this.city)
      this.getHttp();
  }
}
</script>
<style scoped>
.home {
  background: rgb(244, 244, 244);
}
</style>